<template>
	<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="lower">
		<view class="content">
			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
				<image :src="item.img"></image>
				<view class="text alpsoftjurnal">
					{{item.name}}
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					page_size: 10,
				},
				list: [],
				total: 0,
				status: 'more'
			}
		},
		created() {
			this.$nextTick(() => {
				this.hotVideo()
			})
		},
		methods: {
			hotVideo() {
				this.params.lang = uni.getStorageSync('language')
				this.status = 'loading'
				uni.request({
					url: this.configs.webUrl + '/api/video/hotVideo',
					data: this.params,
					success: (data) => {
						console.log('热播好剧', data);
						if (data.data.code == 1) {
							this.list = this.list.concat(data.data.data.list)
							this.total = data.data.data.count
							if (this.total > this.params.page * this.params.page_size) {
								this.status = 'more'
							} else {
								this.status = 'noMore'
							}
						}
					},
				});
			},
			lower() {
				if (this.total > this.params.page * this.params.page_size) {
					this.params.page++
					this.hotVideo()
				}
			},
			detail(vid) {
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-size: inherit;
	}

	.scroll-view {
		max-height: calc(100vh - 48rpx - 47px - 32rpx);
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 31%;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: calc((100vw - 60rpx) * 0.32 / 0.78);
				border-radius: 16rpx;
			}

			.text {
				text-align: center;
				margin: 10rpx 0;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #000000;
			}
		}
	}
</style>